<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数应用-异步操作</title>
</head>
<body>

</body>
<script>

    /**
     *   数据  传向服务器
     *   数据  传给浏览器
     *
     *   step1
     *   step2   ---- 10s----卡，假死 ，block-阻塞 --用户体验差
     *   step3
     *
     *
     *   同步执行   顺序执行
     *   异步执行   跳步执行  --- 常见情形 ；
     *       异步 - 回调
     * */

    function too() {
        console.log('step1');
        console.log('step2');
        console.log('step3');
    }

    // too();

    function yoo(){

        step1();
        step2(function (result){
             console.log("step2:"+result);
        });
        step3();

    }

    function step1(){
        console.log('step1');
    }
    function step2(callback){
        var result='from server';
        setTimeout(function (){

            callback(result);

        },1000)
    }

    function step3(){
        console.log('step3');
    }

    yoo();

    function  inputQuestion(question,callback){
         document.write(question);

        if(question){
            getAnswer(question,callback);
        }
    }


    function getAnswer(question,callback){

        setTimeout(function (){

            var answer =  'this is an answer for :' + question;

            callback(answer);

        },1500)

    }


    inputQuestion("question1",function (result){
        document.write(result);
    })

</script>
</html>